<template>
  <div>
    <div id="xiala">
      <select @change="xiala($event)">
        <option :value="0">全部</option>
        <option :value="xjj.id" v-for="(xjj, index) in cates" :key="index">
          {{ xjj.name }}
        </option>
      </select>
     
      <el-button
        type="primary"
        @click="
          (dialogFormVisible = true),
            (flag = 1),
            (entry.id = 0),
            (entry.title = ''),
            (entry.categoryid = 3)
        "
        >增加</el-button
      >
      <el-dialog title="增加或者修改" :visible.sync="dialogFormVisible">
        <el-form :model="entry">
          <el-form-item hidden label="图书标题" :label-width="formLabelWidth">
            <el-input v-model="entry.id" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="图书简介" :label-width="formLabelWidth">
            <el-input v-model="entry.title" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="图书类型" :label-width="formLabelWidth">
            <el-select v-model="entry.categoryid" placeholder="请选择图书类型">
              <el-option
                :value="xjj.id"
                v-for="(xjj, index) in cates"
                :key="index"
                :label="xjj.name"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="(dialogFormVisible = false), addorupdate()"
            >{{ flag == 1 ? "增加" : "修改" }}</el-button
          >
        </div>
      </el-dialog>
    </div>
    <div id="page">
      <el-table :data="pagelist" style="width: 100%">
        <el-table-column prop="id" label="图书编号" width="180">
        </el-table-column>
        <el-table-column prop="name" label="图书名称" width="180">
        </el-table-column>
        <el-table-column prop="title" label="图书标题" width="180">
        </el-table-column>
        <el-table-column prop="summary" label="内容"> </el-table-column
        ><el-table-column prop="uploaduser" label="上传人"> </el-table-column
        ><el-table-column prop="createdate" label="时间"> </el-table-column>
        <el-table-column label="操作">
          <el-row slot-scope="scope">
            <!-- 插槽 slot scope.$index, -->
            <el-button @click="deletebyid(scope.row.id)">删除</el-button>
            <el-button
              @click="
                handleEdit1(scope.row), (flag = 2), (dialogFormVisible = true)
              "
            >
              修改</el-button
            >
          </el-row>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <div class="block">
        <span class="demonstration">完整功能</span>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[1, 5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { findEntryByPage161 } from "../../api/main";
import { deleteEntryById } from "../../api/main";
import { addorUpdateEntry } from "../../api/main";
export default {
  data() {
    return {
      //分页集合
      pagelist: [],
      currentPage: 1,
      pageSize: 5,
      total: 5,
      //小表集合
      cates: [],
      //分类id
      categoryId: 0,
      //分类名字
      name: "",
      //删除id
      id1: "",
      dialogFormVisible: false, //弹窗
      formLabelWidth: "120px",
      flag: 1, //1增加2修改
      //新集合增加或者修改
      entry: {
        categoryid: "",
        title: "",
        id: "",
      },
    };
  },
  methods: {
    handleEdit1(row) {
      //index,
      this.entry = row;
    },
    addorupdate() {
      this.addorup();
    },
    async addorup() {
      let res = await addorUpdateEntry(this.entry);
      if (res.data.isaddorUpdateEntry === true) {
        if (this.flag == 1) {
          alert("增加成功");
        } else {
          alert("修改成功");
        }
        //异步刷新
        this.getPages();
      } else {
        alert("失败");
      }
    },
    //下拉
    xiala(event) {
      this.categoryId = event.target.value;
      this.getPages();
    },
    //异步套用方法 currentPage,pageSize, title,categoryId
    //删除
    async shanchu() {
      let res = await deleteEntryById(this.id1);
      if (res.data.isdelete === true) {
        alert("删除成功"); //异步刷新
        this.getPages(); //不能套2个
      } else {
        alert("删除失败");
      }
    },
    deletebyid(id) {
      this.id1 = id;
      if (confirm("删除吗")) {
        this.shanchu();
      }
    },
    async getPages() {
      let res = await findEntryByPage161(
        this.currentPage,
        this.pageSize,
        this.title,
        this.categoryId
      );
      console.log(res);
      this.pagelist = res.data.pages.records;
      this.total = res.data.pages.total;
      this.cates = res.data.cates;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getPages(); //刷新
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getPages(); //刷新
    },
  },
  created() {
    //创建就集合上来
    this.getPages();
  },
};
</script>

<style>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>
